<template>
	<view class="content">
		<view class="flex ibox" style="overflow: auto; margin-bottom: 0;">
			<view @click="getList(i.date)" v-for="i in list" :key="i.date" :class="['ii', info.date == i.date ? 'yd' : '']">
				<view>{{ i.week }}</view>
				<view style="margin: 10rpx 0;">{{ i.date.match(/\d{4}-(\d{2}-\d{2})/)[1] }}</view>
			</view>
		</view>
		<div class="itemL" style="padding: 0; width: 100%; height: 58vh; overflow: auto;">
			<div class="flex" :style="{position: 'sticky', zIndex: 99, top: '-1px', background: '#ECEFF4', width: (plist.subDetails.length+1)*70 + 'px'}">
				<div class="box f12" style="position: sticky; left: 0; z-index: 99; background: #ECEFF4;">时间点</div>
				<div class="f12 box" style="background: #ECEFF4;" v-for="i in plist.subDetails || []" :key="i.id">{{ i.venueName }}</div>
			</div>
			<div :style="{width: (plist.subDetails.length+1)*70 + 'px'}">
				<div v-for="i in plist.stadiumPriceList" :key="i.id">
					<div class="flex">
						<div class="f12 box" style="position: sticky; left: 0; z-index: 9; background: #ECEFF4; border: 1rpx solid #ECEFF4;"><div style="border: 1px solid #ECEFF4;">{{ i.showTime || '--' }}</div></div>
						<div class="f12 box" v-for="(i2, idx) in plist.subDetails" :key="i2.id" 
						@click="()=>{
							const c1 = i;
           		const c2 = i2;
							hbu(i, i2);
							if(isLast(i, i2, idx)) return;
							setItem(c1, c2)}">
							<div :class="['pp', (i2.venueStatus!=1 || isLast(i, i2, idx)) ? 'no': '', isSel(i, i2, idx) ? 'ss':'', ishbu(i, i2, idx) ? 'hb' : '']">
								<span v-if="i.discount!=10">¥{{ Math.round(i.price * i.discount/100) }}</span>
								<span :class="[i.discount!=10 ? 'small':'']">¥{{ i.price }}</span>
								<div v-if="i.discount!=10" class="zk">{{i.discount}}折</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="last" style="margin-bottom: 20px; color: #333;">没有更多了</div>
		</div>
		<div class="ibox foot">
			<div class="flex ac" style="margin-bottom: 10px;">
				<span class="f12" style="margin-right: 10px;">预定手机号:</span>
				<span v-if="phone" class="f12">{{ phone }}</span>
				<uni-easyinput v-else :cursorSpacing="10" type="number" v-model="phone2" placeholder="请输入手机号" />
			</div>
			<div class="flex c80">
				<div><span class="iic i1"></span>可预定</div>
				<div style="margin-left: 10px;"><span class="iic i4"></span>可候补</div>
				<div style="margin: 0 20rpx;"><span class="iic i2"></span>已出售</div>
				<div><span class="iic i3"></span>我的选择</div>
			</div>
			<div class="c80 mtb10">已选择场次({{ selList.length }})</div>
			<div class="flex sl">
				<div v-if="!selList.length" class="last">请上方选择预定</div>
				<div class="sel" v-for="(i, idx) in selList" :key="idx" @click="selList.splice(idx, 1)">
					<div class="flexB">
						<div style="font-size: 24rpx;">{{i.date}}</div>
						<div>✕</div>
					</div>
					<div>{{i.name +'/'+i.time }}</div>
				</div>
			</div>
			<div class="line"></div>
			<div class="flexB">
				<div class="pri">¥{{ price }}</div>
				<div class="btn" @click="pay">提交订单</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			year: new Date().getFullYear(),
			info: {},
			plist: {subDetails: []},
			selList: [],
			lastList: [],
			phone: '',
			phone2: '',
			openId: '',
			list: []
		}
	},
	onLoad(p) {
		this.info = JSON.parse(p.obj);
		this.list = JSON.parse(p.time);
		this.getList(this.info.date);
		this.$request({
			url: '/wx/user/getUseInfo',
			method: 'get',
		}).then(res => {
			this.openId = res.data.openid;
			this.phone = res.data.phone || uni.getStorageSync('phone') || '';
			this.phone && uni.setStorageSync('phone', this.phone);
			this.phone2 = this.phone;
		});
	},
	onShow() {
		this.selList = [];
		this.getList(this.info.date);
	},
	computed: {
		price() {
			let s = 0
			this.selList.map(i=>{
				s+= i.discount ==10 ? i.price : Math.round(i.price*i.discount/100)
			});
			return s;
		},
	},
	methods: {
		nextTime(i, ii) {
			this.$request({
				url: '/tStadium/getReserveTime',
				method: 'get',
				data: {
					time: i.stadiumTime,
				}
			}).then(res => {
				let arr = res.data.map(f=>({
					"date": this.info.date,
					"price": this.plist.stadiumPriceList.find(f2=>f2.stadiumTime ==f ).price,
					discount: this.plist.stadiumPriceList.find(f2=>f2.stadiumTime ==f ).discount,
					"time": f,
					name: ii.venueName,
					"venueId": ii.venueId
				}))
				arr.map(s=>{
					if(!this.selList.find(q=>q.venueId == s.venueId && q.time == s.time)) {
						this.selList.push(s);
					}
				})
			})
		},
		
		hbok(i, i2) {
			this.$request({
				url: '/tStadium/reserveStadiumWait',
				data: {
					reserveDate: this.info.date,
					stadiumTime: i.stadiumTime,
					venueId: i2.venueId
				}
			}).then(res => {
				this.$msg('候补成功');
			})
		},
		message(i, i2) {
			uni.requestSubscribeMessage({
				tmplIds: ['_emm4jGZ5ekVidfcLUmydDRb3kYOg1Yc02mMiC7ZZK4'],
				success:(res)=> {
					if(res['_emm4jGZ5ekVidfcLUmydDRb3kYOg1Yc02mMiC7ZZK4'] == 'accept') {
						this.hbok(i, i2);
					} else {
						this.$msg('取消订阅，无法候补');
					}
				}
			})
		},

		hbu(i, i2) {
			if(!this.ishbu(i, i2)) return;
			uni.showModal({
				title: '提示',
				content: '订阅订单状态通知才能候补，请订阅',
				success: (res) => {
					if (res.confirm) {
						// 用户确认后，再次通过按钮触发订阅
						this.message(i, i2);
					}
				}
			});		
		},
		
		ishbu(i, ii) {
			let arr = this.lastList;
			const now = new Date();
			const h = now.getHours(); // 返回 0 到 23 的整数
			const d = now.getDate();
			let day = this.info.date.split('-')[2];
			let s = i.stadiumTime.split(':')[0];
			return arr.find(l=> ((day*1 > d*1) || (h*1 < s*1)) && l.openId && (l.openId!=this.openId) && this.info.date ==l.date && l.time == i.stadiumTime && l.venueId == ii.venueId)
		},
		isLast(i, ii, idx) {
			let arr = this.lastList;			
			return arr.find(l=>this.info.date ==l.date && l.time == i.stadiumTime && l.venueId == ii.venueId)
		},
		isSel(i, ii, idx) {			
			let arr = this.selList;
			return arr.find(l=>this.info.date ==l.date && l.time == i.stadiumTime && l.venueId == ii.venueId)
		},
		setItem(i, ii) {
			if(ii.venueStatus!=1) return;
			let arr = this.selList;
			let idx = arr.findIndex(l=>this.info.date ==l.date && l.time == i.stadiumTime && l.venueId == ii.venueId)
			if(idx>-1) {
				this.selList.splice(idx,1)
			} else {
				let res = {
				"date": this.info.date,
				"price": i.price,
				discount: i.discount,
				"time": i.stadiumTime,
				name: ii.venueName,
				"venueId": ii.venueId
			}
			this.nextTime(i, ii);
			// this.selList.push(res)
			}
		},
		pay() {
			if(!this.selList.length) return this.$msg('请先选择');
			if(!this.phone2) return this.$msg('请输入预定手机号');
			const regex = /^1[3-9]\d{9}$/;
			if (!regex.test(this.phone2)) return this.$msg('手机号格式错误');

			uni.showModal({
				title: '提示',
				content: '请先订阅订单状态, 才能预定',
				success: (res) => {
					if (res.confirm) {
						// 用户确认后，再次通过按钮触发订阅
						uni.requestSubscribeMessage({
							tmplIds: ['_emm4jGZ5ekVidfcLUmydDRb3kYOg1Yc02mMiC7ZZK4'],
							success:(res)=> {
								if(res['_emm4jGZ5ekVidfcLUmydDRb3kYOg1Yc02mMiC7ZZK4'] == 'accept') {
									this.$request({
										url: '/tStadium/reserveStadium',
										data: {
											reserveList: this.selList,
											phone: this.phone2
										}
									}).then(res => {
										let no = res.data.pickNo;
										uni.navigateTo({
											url: `/pages/prePay?info=${JSON.stringify(this.info)}&list=${JSON.stringify(this.selList)}&no=${no}`
										});
									})
								} else {
									this.$msg('取消订阅，无法提交');
								}
							}
						})
					}
				}
			});
			
		},
		
		getList(date) {
			this.info.date = date;
			this.$request({
				url: '/tStadium/queryReservePrice',
				method: 'get',
				data: {
					reserveDate: date,
					stadiumId: this.info.pid
				}
			}).then(res => {
				this.plist = res.data;
				this.lastList = res.data.pickupStadiums.map(i=>({
					openId: i.openId,
					"date": i.reserveDate || this.info.date,
					"price": i.stadiumPriceId,
					discount: i.discount || 10,
					"time": i.stadiumTime,
					name: res.data.subDetails.find(i=>i.venueId == i.venueId).venueName,
					"venueId": i.venueId
				})) || []
			})
		}

	}
}
</script>

<style lang="scss">
.small {
	font-size: 18rpx;
	color: #999;
	text-decoration: line-through;
}
.foot {
	position: sticky;
	width: 100%;
	bottom: 0;
	height: 230px;
	z-index: 99;
}
.pri {
	font-size: 22px;
	color: red;
}
.iic {
	display: inline-block;
	vertical-align: middle;
	width: 40rpx;
	height: 20rpx;
	margin-right: 10rpx;
	border-radius: 6rpx;
	border: 1px solid transparent;
}
.i1 {
	background: #fff;
	border: 1px solid #2655CA;
}
.i2 {
	background: #999;
}
.i3 {
	background: #2655CA;
}
.i4 {
	border-color: #e9952f;
	color: #e9952f;
}
.sl {
	overflow: auto;
	height: 45px;
	flex-wrap: nowrap;
}
.sel {
	min-width: 90px;
	font-size: 12px;
	border-radius: 10rpx;
	color: #fff;
	padding: 10rpx 6rpx;
	margin-right: 4px;
	background: #2655CA;
}
.box {
	margin: 4rpx;
	min-width: 144rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
}
.pp {
	position: relative;
	height: 100%;
	line-height: 80rpx;
	border: 1rpx solid $theme;
	border-radius: 10rpx;
	color: #2655CA;
	font-size: 26rpx;
	background: #fff;
}
.no {
	background: #e4e4e4;
	color: #999;
	border: 1rpx solid #999;
}
.ss {
	background: #2655CA;
	color: #fff;
}
.hb {
	border-color: #e9952f;
	color: #e9952f;
	background: #fff;
}
.zk {
	position: absolute; right: -2rpx; font-size: 18rpx; color: red;
	top: -2rpx;
	z-index: 2;
	background: #faeff0;
	height: 18rpx;
	line-height: 18rpx;
}
.ii {
	text-align: center;
	color: #333;
	padding: 20rpx;
	margin: 0 20rpx 0;
	font-size: 28rpx;
	border-radius: 20rpx;
	background: #eee;
}

.yd {
	background: linear-gradient(180deg, #2655CA 0%, #4A72D5 50%, #D5E0FB 100%);
	color: #fff;
}
.btn {
	text-align: center;
	width: 88px;
	height: 40px;
	font-size: 13px;
	line-height: 40px;
	border-radius: 20px;
	background: $theme;
	color: #fff;
}
</style>